<template>
  <main class="bg-red-800 text-red-50 dark:bg-yellow">
    {{ userStore.loginStatus }}{{ $t('sousuo') }}
  </main>

  <button @click="login">
    {{ userStore.loginStatus ? '登录了' : '登录' }}
  </button>
  <br />
  <button @click="handleUpdateValue()">切换语言</button>
  <br />
  <button @click="sendARequest">发送请求</button>
  <br />
  <div class="mb-4">
    <button @click="changeThem">切换主题</button>
  </div>
  <!-- 跳转chat页面 -->
  <div class="mb-4">
    <button @click="goChat">跳转chat页面</button>
  </div>

  <!-- 图标使用案例 -->
  <div class="p-4 space-y-4">
    <h2 class="text-xl font-bold mb-4">图标使用案例</h2>

    <!-- 基础图标 -->
    <div class="flex items-center space-x-4">
      <div class="i-fluent-add-24-regular text-2xl text-blue-500"></div>
      <div class="i-fluent-home-24-regular text-2xl text-green-500"></div>
      <div class="i-fluent-person-24-regular text-2xl text-purple-500"></div>
    </div>

    <!-- Fluent 图标库示例 -->
    <div class="flex items-center space-x-4">
      <div class="i-fluent-emoji-24-regular text-2xl text-yellow-500"></div>
      <div class="i-fluent-weather-sunny-24-regular text-2xl text-orange-500"></div>
      <div class="i-fluent-people-24-regular text-2xl text-pink-500"></div>
    </div>

    <!-- 带交互效果的图标 -->
    <div class="flex items-center space-x-4">
      <div
        class="i-fluent-search-24-regular text-2xl text-gray-500 hover:text-blue-500 cursor-pointer transition-colors"
      ></div>
      <div
        class="i-fluent-heart-24-regular text-2xl text-gray-500 hover:text-red-500 cursor-pointer transition-colors"
      ></div>
      <div
        class="i-fluent-settings-24-regular text-2xl text-gray-500 hover:text-green-500 cursor-pointer transition-colors"
      ></div>
    </div>

    <!-- 带背景的图标 -->
    <div class="flex items-center space-x-4">
      <div class="bg-blue-100 p-2 rounded-full">
        <div class="i-fluent-alert-24-regular text-2xl text-blue-500"></div>
      </div>
      <div class="bg-green-100 p-2 rounded-full">
        <div class="i-fluent-mail-24-regular text-2xl text-green-500"></div>
      </div>
      <div class="bg-purple-100 p-2 rounded-full">
        <div class="i-fluent-chat-24-regular text-2xl text-purple-500"></div>
      </div>
    </div>

    <!-- Fluent 图标动画效果 -->
    <div class="flex items-center space-x-4">
      <div class="i-fluent-arrow-sync-24-regular text-2xl text-blue-500 animate-spin"></div>
      <div class="i-fluent-arrow-bounce-24-regular text-2xl text-green-500 animate-bounce"></div>
      <div class="i-fluent-arrow-pulse-24-regular text-2xl text-purple-500 animate-pulse"></div>
    </div>
    <WelcomeItem />
    {{ detail }}
  </div>
</template>
<script setup lang="ts">
import { getLoginInfo } from '@/api'
import { useUser } from '@/stores/index'
import { useDark } from '@vueuse/core'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUser()
const login = () => {
  useUser().login({
    token: 'aaaa',
  })
}
import { setLocale } from '@/lang'
const handleUpdateValue = () => {
  // switch (value) {
  //   case ENGLISH:
  //     lang = LANG_VALUE.En
  //     break
  //   case ZHONG_WEN:
  //     lang = LANG_VALUE.Zh
  //     break
  //   default:
  //     break
  // }
  setLocale('en')
}
const detail = ref()
const sendARequest = async () => {
  try {
    const { data } = await getLoginInfo()
    detail.value = data
  } catch (error) {
    console.error('🚀 ~ file:HomeView method:sendARequest line:42 -----', error)
    // 捕获并处理异常的代码
  }
}
const changeThem = () => {
  const dark = useDark()
  dark.value = !dark.value
}
const goChat = () => {
  router.push('/ai')
}
</script>
